<template>
  <div
    class="d-flex mb-4"
    style="column-gap: 1%"
  >
    <!-- #region template -->
    <BBadge pill>Primary</BBadge>
    <BBadge
      pill
      variant="secondary"
      >Secondary</BBadge
    >
    <BBadge
      pill
      variant="success"
      >Success</BBadge
    >
    <BBadge
      pill
      variant="danger"
      >Danger</BBadge
    >
    <BBadge
      pill
      variant="warning"
      >Warning</BBadge
    >
    <BBadge
      pill
      variant="info"
      >Info</BBadge
    >
    <BBadge
      pill
      variant="light"
      >Light</BBadge
    >
    <BBadge
      pill
      variant="dark"
      >Dark</BBadge
    >
    <!-- #endregion template -->
  </div>
</template>
